<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拦截器</title>
  </head>
  <body>
    <button id="sentGet">发送get请求</button>
    <button id="sentPost">发送post请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.8.4/axios.js"></script>
    <script>
      // 创建axios请求实例
      const axiosInstance = axios.create({
        baseURL: 'http://127.0.0.1:6001/', //请求的基准地址
        timeout: 10000, //请求的超时时间
        header: { 'Content-Type': 'application/json' }, //设置请求头
      })

      // 添加请求拦截器
      axiosInstance.interceptors.request.use(
        function (config) {
          //在发送请求之前做些什么
          console.log('请求拦截器')
          console.log('config=>', config)
          // 添加请求头
          config.header.erqiao = 228
          return config
        },
        function (error) {
          console.log('请求错误')
          // 对请求错误做些什么
          return Promise.reject(error)
        }
      )

      //   添加响应拦截器
      axiosInstance.interceptors.response.use(
        function (response) {
          console.log('响应拦截器')
          console.log('response => ', response)
          // 2xx范围内的状态码都会触发该函数
          //对响应数据做些什么
          return response.data
        },
        function (error) {
          // 超出2xx范围的状态码都会执行此函数
          // 对响应错误做些什么
          console.log('响应错误', error.status)
          if (error.status === 404) {
            console.log('404错误')
          } else if (error.status === 500) {
            console.log('500错误')
          }
          return Promise.reject(error.message)
        }
      )

      document
      .getElementById('sentGet')
      .addEventListener('click',async function () {
        let data = await axiosInstance.get('/music')
        console.log(data);
      })

      document
      .getElementById('sentPost')
      .addEventListener('click',async function () {
        let data = await axiosInstance.post('/login')
        console.log(data);
      })
    </script>
  </body>
</html>
